/**
 * Created by GYL on 2018/7/25
 */
import React, {Component} from 'react';
import { Row, Col } from 'antd';
import moment from 'moment';
import styles from './HeaderRight.less';
import PublicTemplate from "../../services/PublicTemplate";

class HeaderRight extends Component {
  state = {

  };
  componentDidMount(){

  };
  render(){
    let t = this;
    let {} = t.state;
    let { list } = t.props;
    const width = document.body.clientWidth;
    const color = ['#1890FF','#FAAD14','#52C41A'];
    let paddingLeft = "1vw";
    if (width > 1367){
      paddingLeft = "2vw";
    }
    if (list.length === 2){
      paddingLeft = "4.5vw"
    }
    return(
      <div className={styles.container} >
        <Row gutter={12}>
          {
            list.map((item, index) => {
              return(
                <Col span={24/list.length} key={index}>
                  <Col span={23} style={{paddingLeft:paddingLeft}}>
                    <div style={{color:color[index],fontSize:24,lineHeight:1.3}}>{item.storage ? item.storage : 0}</div>
                    <div className={styles.gayColor}>{item.name?item.name:''}</div>
                    <div className={styles.line}/>
                    <div title={moment(item.updateTime).format("YYYY-MM-DD HH:mm")}>{item.updateTime?(width > 1367)?moment(item.updateTime).format("YYYY-MM-DD HH:mm"):moment(item.updateTime).format("YYYY-MM-DD"):''}</div>
                    <div className={styles.gayColor}>最后更新</div>
                  </Col>
                  {
                    index === list.length -1 ? '':<Col span={1} style={{marginTop:35,height:24,borderRight:'1px solid #BBBBBB'}}/>
                  }
                </Col>
              )
            })
          }
        </Row>
      </div>
    )
  }
}
export default HeaderRight;
